<template>
  <div class="appointment-notice-confirm">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="预约须知" left-arrow @click-left="goBack" />
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" size="24px">加载中...</van-loading>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <van-empty image="error" description="加载失败">
        <van-button type="primary" @click="loadNotice">重新加载</van-button>
      </van-empty>
    </div>

    <!-- 预约须知内容 -->
    <div v-else-if="noticeData" class="notice-content">
      <div class="notice-header">
        <h2 class="notice-title">预约挂号须知</h2>
        <div class="notice-time">
          <van-icon name="clock-o" />
          <span>{{ formatDateTime(noticeData.dateTime) }}</span>
        </div>
      </div>
      
      <div class="notice-body">
        <div class="notice-text" v-html="noticeData.noticeName"></div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div v-else class="empty-container">
      <van-empty image="search" description="暂无预约须知">
        <van-button type="primary" @click="loadNotice">刷新</van-button>
      </van-empty>
    </div>

    <!-- 确认按钮 -->
    <div v-if="noticeData" class="confirm-section">
      <van-button 
        type="primary" 
        size="large" 
        block 
        round
        @click="confirmNotice"
        class="confirm-btn"
      >
        确认
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { api } from '@/api'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const error = ref(false)
const noticeData = ref<any>(null)

// 页面加载时获取预约须知
onMounted(() => {
  loadNotice()
})

// 获取预约须知数据
const loadNotice = async () => {
  loading.value = true
  error.value = false
  
  try {
    const response = await api.getAppointmentNotice()
    if (response.code === 200 && response.data) {
      noticeData.value = response.data
    } else {
      error.value = true
      Toast(response.message || '获取预约须知失败')
    }
  } catch (err) {
    console.error('获取预约须知失败:', err)
    error.value = true
    Toast('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 确认预约须知，进入选择就诊人流程
const confirmNotice = () => {
  // 跳转到选择就诊人页面
  router.push('/appointments/select-patient')
}
</script>

<style scoped>
.appointment-notice-confirm {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

.notice-content {
  flex: 1;
  padding: 16px;
}

.notice-header {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notice-title {
  font-size: 20px;
  font-weight: 600;
  color: #323233;
  margin: 0 0 12px 0;
  text-align: center;
}

.notice-time {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969799;
  font-size: 14px;
}

.notice-time .van-icon {
  margin-right: 4px;
}

.notice-body {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.notice-text {
  line-height: 1.6;
  color: #323233;
  font-size: 16px;
}

.notice-text :deep(p) {
  margin: 0 0 12px 0;
}

.notice-text :deep(p:last-child) {
  margin-bottom: 0;
}

.confirm-section {
  padding: 16px;
  background: white;
  border-top: 1px solid #ebedf0;
}

.confirm-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}
</style>
